<script setup lang='ts'>
import { useAddOrUpdateOrderAddress, useGetOrderAddressInfo, useGetPc } from '@fl/api/purchase'
import { SubmitBtn } from '@fl/components'

const visible = defineModel<boolean>('visible', { required: true })
const id = defineModel<string>('id')
const { isPending, mutate } = useAddOrUpdateOrderAddress()
const isSend = ref(true)
const { data: pcaData, isLoading: pcaLoading } = useGetPc(visible)
const { data: infoDate, isLoading: infoLoading } = useGetOrderAddressInfo(id, isSend)
const isLoading = computed(() => pcaLoading.value || infoLoading.value)
const form = ref()
const formValues = ref({
    address: '',
    cityId: '',
    consignee: '',
    phone: '',
    projectName: '',
})
const title = computed(() => id?.value ? '编辑收货地址' : '新增收货地址')

const pcaOptions = computed(() => {
    return pcaData.value ? pcaData.value : []
})

const columns = [
    {
        fieldProps: {
            maxlength: 50,
        },
        label: '项目名称',
        labelWidth: '100px',
        prop: 'projectName',
        valueType: 'copy',
    },
    {
        fieldProps: {
            maxlength: 50,
        },
        label: '收货人',
        labelWidth: '100px',
        prop: 'consignee',
        valueType: 'copy',
    },
    {
        fieldProps: {
            maxlength: 50,
        },
        label: '收货人电话',
        labelWidth: '100px',
        prop: 'phone',
        valueType: 'copy',
    },
    {
        fieldProps: {
            props: { children: 'children', emitPath: false, label: 'name', value: 'code' },
        },
        label: '收货地址',
        labelWidth: '100px',
        options: pcaOptions,
        prop: 'cityId',
        valueType: 'cascader',
    },
    {
        fieldProps: {
            maxlength: 50,
        },
        label: '详细地址',
        labelWidth: '100px',
        prop: 'address',
        valueType: 'copy',
    },

]
const rules = {
    address: [
        {
            message: '请输入详细地址',
            required: true,
        },
    ],
    cityId: [
        {
            message: '请选择省市',
            required: true,
        },
    ],
    consignee: [
        {
            message: '请输入收货人',
            required: true,
        },
    ],
    phone: [
        {
            message: '请输入收货人电话',
            required: true,
        },
        {
            message: '手机号码格式不正确',
            pattern: /^1[3-9]\d{9}$/,
            trigger: 'blur',
        },
    ],
    projectName: [
        {
            message: '请输入项目名称',
            required: true,
        },
    ],
}

async function confirm() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const params = id?.value ? { id: id.value, ...unref(formValues) } : formValues.value
        // console.log(params)
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}
function cancel() {
    // 重置数据
    visible.value = false
}
function reset() {
    id.value = ''
    form.value.formInstance.resetFields()
}

watchEffect(() => {
    if (infoDate.value) {
        formValues.value = {
            address: infoDate.value?.address,
            cityId: infoDate.value?.cityId,
            consignee: infoDate.value?.consignee,
            phone: infoDate.value?.phone,
            projectName: infoDate.value?.projectName,
        }
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="800"
                close-on-press-escape
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    animated
        />

        <PlusForm v-else
                  ref="form"
                  v-model="formValues"
                  :columns="columns"
                  :label-width="150"
                  :rules="rules"
                  :has-footer="false"
        />

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
